<script>
export default {
    name: 'FilterUsage',
    data() {
        return {
            iconStyle: ''
        };
    },
    methods: {
        iconColorChange(type) {
            switch (type) {
                case 'blur':
                    this.iconStyle = 'filter: blur(5px)';
                    break;
                case 'brightness':
                    this.iconStyle = 'filter: brightness(50%)';
                    break;
                case 'hue-rotate':
                    this.iconStyle = 'filter: hue-rotate(200deg)';
                    break;
                case 'contrast':
                    this.iconStyle = 'filter: contrast(200%)';
                    break;
                case 'grayscale':
                    this.iconStyle = 'filter: grayscale(100%)';
                    break;
                case 'opacity':
                    this.iconStyle = 'filter: opacity(50%)';
                    break;
                case 'saturate':
                    this.iconStyle = 'filter: saturate(200%)';
                    break;
                case 'sepia':
                    this.iconStyle = 'filter: sepia(100%)';
                    break;
                case 'invert':
                    this.iconStyle = 'filter: invert(100%)';
                    break;
                case 'drop-shadow':
                    this.iconStyle = 'filter: drop-shadow(5px 5px 5px #000)';
                    break;
                default:
                    this.iconStyle = '';
                    break;
            }
        }
    }
};
</script>

<template>
    <div>
        <div>
            <h1>filter使用</h1>
            <div class="flex">
                <button @click="iconColorChange('')">默认</button>
                <button @click="iconColorChange('hue-rotate')">色相</button>
                <button @click="iconColorChange('blur')">模糊</button>
                <button @click="iconColorChange('brightness')">亮度</button>
                <button @click="iconColorChange('contrast')">对比度</button>
                <button @click="iconColorChange('grayscale')">灰度</button>
                <button @click="iconColorChange('opacity')">透明度</button>
                <button @click="iconColorChange('saturate')">饱和度</button>
                <button @click="iconColorChange('sepia')">褐色</button>
                <button @click="iconColorChange('invert')">反色</button>
                <button @click="iconColorChange('drop-shadow')">阴影</button>
            </div>
            <div class="flex P-20" style="gap: 30px">
                <div>
                    <span>原图</span>
                    <div class="img">
                        <img src="@/assets/images/touxiang.jpg" alt="" />
                    </div>
                </div>
                <div>
                    <span>效果图</span>
                    <div class="img" :style="iconStyle">
                        <img src="@/assets/images/touxiang.jpg" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.flex {
    display: flex;
    gap: 10px;
}
.P-10 {
    padding: 10px;
}
.P-20 {
    padding: 20px;
}
.img {
    width: 100px;
    height: 100px;
}
.img img {
    width: 100%;
}
</style>
